<template>
  <g-table-page
    ref="TB"
    :store-model-name="storeModelName"
    add-btn-link="/admin/surveyTemplate/add"
    add-btn-link-text="添加问卷"
    :selection="false"
    :table-operation="tableOperation"
    :show-dropdown-groups="true"
  >
    <!-- 根据tableHeadList slotName字端 动态插入 插槽 -->
  </g-table-page>
  <g-dialog
    v-model:dialog-visible="editQuestionVisible"
    :title="optTitle"
    width="900px"
    :show-cancel-btn="false"
  >
    <question-edit
      :template-id="templateId"
    />
  </g-dialog>
  <g-dialog
    v-model:dialog-visible="viewQuestionVisible"
    :title="viewTitle"
    width="950px"
    :show-cancel-btn="false"
  >
    <question-view
      :template-id="templateId"
    />
  </g-dialog>
</template>

<script lang="ts" setup>
import { computed, ref  } from 'vue'
import type { TableHeadList } from '@/types/storeModule'
import router from '@/router'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { updateSurveyTemplateApi } from '@/api/admin'
import QuestionEdit from './QuestionEdit.vue'
import QuestionView from './QuestionView.vue'

const storeModelName = 'surveyTemplateModule'
const editQuestionVisible = ref(false)
const viewQuestionVisible = ref(false)
const viewTitle = ref('')
const TB = ref()
const optTitle = ref('')
const templateId = ref<number>(null)
const tableOperation = {
  width: 120,
  fixed: 'right',
  buttonGroups: [
    ({ row }) => {
      return {
        name: '编辑',
        isShow: true,
        click: ({ row }) => {
          router.push({
            path: '/admin/surveyTemplate/edit',
            query: { id: row.id }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: row.displayState === 1 ? '删除' : '恢复',
        type: row.displayState == 1 ? 'danger' : 'success',
        isShow: true,
        click: ({ row }) => {
          updateSurveyTemplateApi({ id: row.id, displayState: row.displayState === 1 ? 0 : 1 }).then((res) => {
            if (res * 1 === 200) {
              ElMessage.success('删除成功')
              TB.value.handleSearchClick()
            }
          })
        }
      }
    },
    ({ row }) => {
      return {
        name: row.hasQuestion ? '编辑问卷题目' : '添加问卷题目',
        isShow: row.displayState === 1,
        click: ({ row }) => {
          optTitle.value = row.hasQuestion ? '编辑问卷题目' : '添加问卷题目'
          templateId.value = row.id
          editQuestionVisible.value = true
        }
      }
    },
    ({ row }) => {
      return {
        name: '预览问卷题目',
        isShow: row.displayState === 1 && row.hasQuestion,
        click: ({ row }) => {
          templateId.value = row.id
          viewTitle.value = row.nameZh
          viewQuestionVisible.value = true
        }
      }
    }
  ]
}
const tableHeadListSlotName = computed(() => {
  const tableHeadList = store.state[storeModelName].tableHeadList
  return tableHeadList.filter((item: TableHeadList) => item.slotName)
})
</script>
